﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="address.aspx.cs" Inherits="GDIT.page.general.address" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>广东科学技术职业学院-学校概况-地理位置</title>
    <link href="../../css/global.css" rel="stylesheet" type="text/css" />
    <link href="../../css/insecond.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .address{ margin:30px 0 0 0;}
        .address .content{ width:750px; margin:0 auto;}
        .address .content .bg{ height:500px; background:url(../../images/address_guangdong_bg.gif) center no-repeat;}
        .ditu{width:750px;height:540px;}
        .clear_float{clear:both}
        .choose_img img{width:200px;height:180px;border:none;margin-top:2px;}
        .choose_img a{border:3px solid #ccc}
        .choose_img a:hover{border:3px solid #f90}
        #dlwz_choose{float:left;width:750px;}
        #dwqz{float:left;width:750px;margin:30px auto 0 auto;}
        #dwqz label{color: red;}
        #container{float:left;width:750px;height:540px;border:1px solid gray; margin-top:30px;}
    </style>
    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    <script type="text/javascript">
        $(function () {
            var zhxq = $("#zhxq");
            var gzxq = $("#gzxq");
            var container1 = $("#container1");
            var container2 = $("#container2");
            var dwqz = $("#dwqz label");
            container1.show();
            container2.hide();
            $(".choose_img a").click(function () {
                if ($(this).attr("id") == "zhxq") {
                    container1.show();
                    container2.hide();
                    dwqz.html("珠海校区");
                } else {
                    dwqz.html("广州校区");
                    container2.show();
                    container1.hide();
                }
            })
        });
    </script>
</head>
<body>

<div id="wrapper">
    <div id="center">
        
        <!--标题开始-->
        <div id="title">
            地理位置
        </div>
        <!--标题结束-->

        <div id="address">
            <div id="dlwz_choose">
                <ul>
                <li class="choose_img">
                    <a href="#" id="zhxq" title="珠海校区"><img alt="" src="../../images/address_zhuhai.gif" /></a>
                    <a href="#" id="gzxq" title="广州校区"><img alt="" src="../../images/pic-6.gif" /></a>
                </li>
                </ul>
            </div>
            <div id="dwqz"><label >珠海校区</label>地理位置</div>
            <div id="container">
                <div id="container1" class="ditu"></div>
                <div id="container2" class="ditu"></div>
            </div>
            <div class="clear_float"></div>
        </div>

    </div>
</div>

</body>
</html>
<script type="text/javascript">
    var map1 = new BMap.Map("container1");
    map1.centerAndZoom(new BMap.Point(113.35348, 22.12884), 11);
    map1.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map1.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map1.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

    var myGeo1 = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野
    myGeo1.getPoint("珠海市金湾区珠海大道南侧", function (point) {
        if (point) {
            map1.centerAndZoom(point, 16);
            map1.addOverlay(new BMap.Marker(point));
        }
    }, "珠海市");




    var opts = {
        width: 350,     // 信息窗口宽度
        height: 170,     // 信息窗口高度
        title: "广东科学技术职业学院"  // 信息窗口标题
    }
    var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>广东科学技术职业学院</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='../../images/pic-07.gif' width='100' height='100' title='广东科学技术职业学院'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址：珠海市金湾区珠海大道南侧</p>" +
"</div>";

    var infoWindow1 = new BMap.InfoWindow(sContent, opts);  // 创建信息窗口对象
    map1.openInfoWindow(infoWindow1, map1.getCenter());      // 打开信息窗口


</script>
<script type="text/javascript">
    var map = new BMap.Map("container2");
    map.centerAndZoom(new BMap.Point(113.369749, 23.150388), 11);
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

    var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint("科华街351", function (point) {
        if (point) {
            map.centerAndZoom(point, 16);
            map.addOverlay(new BMap.Marker(point));
        }
    }, "广州市");




    var opts = {
        width: 350,     // 信息窗口宽度
        height: 170,     // 信息窗口高度
        title: "广东科学技术职业学院"  // 信息窗口标题
    }
    var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>广州学院</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='../../images/pic-6.gif' width='100' height='100' title='广东省科技干部学院'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址：广州天河区科华街351号</p>" +
"</div>";

    //var infoWindow = new BMap.InfoWindow("地址：广州天河区科华街351号", opts);  // 创建信息窗口对象
    var infoWindow = new BMap.InfoWindow(sContent, opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口



    //"天河客运站", "华农"

</script>
